// css var
:root {
  --color: #07c160;
  --color-lighter: #90de45;
  --color-success: #07c160;
  --color-warning: #faad14;
  --color-danger: #eb5e12;
  --border-radius: 8px;
  --border-radius-small: 4px;
  --border-radius-big: 16px;
  --top-nav-heght: 64px;
}
// base color
$light-blue: #90de45;
$red: #eb5e12;
$pink: #eb5e12;
$green: #07c160;
$tiffany: #4ab7bd;
$yellow: #faad14;
$panGreen: #30b08f;
$grayBg: #efeff4;

$sub-text-color: #999;
.sub-text-color {
  color: $sub-text-color;
}
// sidebar
// $menuText: #333;
// $menuActiveText: var(--color);
// $subMenuActiveText: #333; // https://github.com/ElemeFE/element/issues/12951

// $menuBg: #fff;
// $menuActiveBg: #fafafa;
// $menuHover: #fafafa;

// $subMenuBg: #fff;
// $subMenuActiveBg: #fafafa;
// $subMenuHover: #fafafa;

$sideBarWidth: 200px;

$font-size: 14px;
$font-size-keydata: 24px;
$border-radius: 4px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  // menuText: $menuText;
  // menuActiveText: $menuActiveText;
  // subMenuActiveText: $subMenuActiveText;
  // menuBg: $menuBg;
  // menuHover: $menuHover;
  // subMenuBg: $subMenuBg;
  // subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

.bglg {
  background: linear-gradient(to left, var(--color) 0%, $light-blue 100%);
  box-shadow: 0px 13px 16px 0px rgba(7, 168, 85, 0.2);
}
.border-radius-small {
  border-radius: 4px;
}
.border-radius {
  border-radius: 8px;
}
.border-radius-big {
  border-radius: 16px;
}
